<template>
  <div class="boxs">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-tabs>
        <el-tab-pane label="个人详情">
          <!-- 个人信息 -->
          <el-form
            ref="fm"
            :model="formData"
            label-width="100px"
            :rules="rules"
          >
            <!-- 用户名 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="formData.username" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 手机号 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="手机号">
                  <el-input v-model="formData.mobile" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 入职时间 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="入职时间">
                  <el-date-picker
                    v-model="formData.timeOfEntry"
                    type="date"
                    class="inputW"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 员工照片 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="员工头像">
                  <!-- 放置上传图片 -->
                  <!-- <el-image
                    :src="require('@/assets/common/head.jpg')"
                  ></el-image> -->
                  <!-- <UploadImg :staffPhoto="formData.staffPhoto" @change-photo="changePhoto"/> -->
                  <UploadImg :staff-photo.sync="formData.staffPhoto" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 保存个人信息 -->
            <el-row class="inline-info" type="flex" justify="center">
              <el-col :span="12">
                <el-button @click="updateUser" type="primary"
                  >保存更新</el-button
                >
                <el-button @click="$router.back()">返回</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// 导入获取员工详情后台接口
import { getUserDetailByIdApi } from "@/api/user";
// 更新用户信息后台接口方法
import { saveUserDetailByIdApi } from "@/api/employees";
export default {
  data() {
    return {
      // 表单变量
      formData: {
        username: "",
        timeOfEntry: "",
        // 头像
        staffPhoto:''
      },
      // 表单校验规则
      rules: {
        // 用户名
        username: [
          {
            required: true,
            message: "用户名必填！",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    // console.log(this.$route.params.id);
    this.getDetail();
  },
  methods: {
    // 修改头像列表
    changePhoto(newUrl) {
      this.formData.staffPhoto = newUrl
    },
    // 保存更新
    updateUser() {
      this.$refs.fm.validate(async (isOk) => {
        if (isOk) {
          // 校验通过
          await saveUserDetailByIdApi(this.formData);
          this.$message.success("更新成功！");
          // 更新vuex当前登录人信息
          // this.$store.state.user.userInfo.id 登录人id
          // 正在修改的员工id如果相等，则执行
          if (this.$store.state.user.userInfo.id === this.formData.id) {
            this.$store.dispatch("user/getUserInfoAction");
          }
        }
      });
    },
    // 获取元详情数据
    async getDetail() {
      const detail = await getUserDetailByIdApi(this.$route.params.id);
      // console.log(detail);
      if(!detail.staffPhoto) {
        detail.staffPhoto = ''
      }
      
      this.formData = detail;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>